<template>
  <div id="box">
    <div id="pagehead">
      <div id="pageheaddiv"></div>
      <span id="pageheadspan">私教管理</span>
      <!-- <el-button
        id="pageheadbtn"
        type="primary"
        icon="el-icon-user"
        circle
      ></el-button> -->
    </div>
    <div id="headformdiv">
      <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="">
          <el-select v-model="data.coursenameid" placeholder="请选择课程名称">
            <el-option
              v-for="(v, i) in coursenamearr"
              :label="v.name"
              :value="v.id"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="data.coachid" placeholder="请选择课程教练">
            <el-option
              v-for="(v, i) in coacharr"
              :label="v.name"
              :value="v.id"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchbtn">查询</el-button>
          <el-button size="medium" @click="toaddpersonal">添加私教</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="personaltable">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="image" label="课程图片" width="180">
            <template slot-scope="scope">
              <img
                :src="scope.row.image"
                alt="QAQ"
                style="width: 40px; height: 40px"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="课程名称" width="180">
          </el-table-column>
          <el-table-column prop="cname" label="教练"> </el-table-column>
          <el-table-column prop="sort_by" label="排序"> </el-table-column>
          <el-table-column prop="courses_time" label="时长"> </el-table-column>
          <el-table-column prop="remarks" label="备注"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <!-- (scope.row) -->
              <el-button type="text" size="small" @click="editbtn(scope.row)"
                >编辑</el-button
              >

              <el-button type="text" size="small" @click="open(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!--编辑的对话框-->
    <div id="editbox">
      <el-dialog title="课程编辑" :visible.sync="editalert">
        <el-form :model="editTable" :inline="true" class="demo-form-inline">
          <div id="coursealertname">
            <el-form-item label="课程名称" :label-width="'100'">
              <el-input v-model="editTable.name" autocomplete="off" placeholder="请输入课程名称"></el-input>
            </el-form-item>
          </div>

          <span id="coursephoto">课程图片</span>
          <div id="coursealertupload">
            <el-upload
              action="/gym/uploadImage"
              list-type="picture-card"
              :auto-upload="true"
              name="image"
              on-success="uploadimg"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>

          <div id="videoaddress">
            <el-form-item label="添加视频地址" :label-width="'100'">
              <el-input v-model="editTable.url" autocomplete="off" placeholder="仅支持腾讯视频"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="私教课程时长" :label-width="'100'">
              <el-input
                v-model="editTable.courses_time"
                autocomplete="off"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="每日课时上限" :label-width="'100'">
              <el-input
                v-model="editTable.upper_limit"
                autocomplete="off"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
          </div>

          <div id="coachdiv">
            <el-form-item label="教练：">
              <el-select v-model="editTable.coach" placeholder="请选择活动区域">
                <el-option
                  v-for="(v, i) in coacharr"
                  :label="v.name"
                  :value="v.id"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div id="feediv">
            <div id="listfee1">
              <el-form-item label="课时费：">
                <el-input
                  v-model="editTable.lesson_time"
                  placeholder="请输入数字"
                ></el-input>
              </el-form-item>
            </div>

            <div id="listfee2">
              <el-form-item label="">
                <el-input
                  v-model="editTable.lesson_money"
                  placeholder="元"
                ></el-input>
              </el-form-item>
              <span>是否体验：</span>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
              </el-form-item>
            </div>
          </div>

          <div id="coursefee2">
            <div id="listfee3">
              <el-form-item label="">
                <el-input
                  v-model="editTable.fee2"
                  placeholder="请输入数字"
                ></el-input>
              </el-form-item>
            </div>

            <div id="listfee3">
              <el-form-item label="">
                <el-input v-model="editTable.yuan2" placeholder="元"></el-input>
              </el-form-item>
              <span>是否体验：</span>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
              </el-form-item>
            </div>
          </div>

          <div id="coursefee2">
            <div id="listfee3">
              <el-form-item label="">
                <el-input
                  v-model="editTable.fee3"
                  placeholder="请输入数字"
                ></el-input>
              </el-form-item>
            </div>

            <div id="listfee3">
              <el-form-item label="">
                <el-input v-model="editTable.yuan3" placeholder="元"></el-input>
              </el-form-item>
              <span>是否体验：</span>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">添加</el-button>
              </el-form-item>
            </div>
          </div>

          <div id="listremarks">
            <el-form-item label="课程备注" :label-width="'100'">
              <el-input
                v-model="editTable.remarks"
                autocomplete="off"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </div>

          <div id="listtag">
            <el-form-item label="课程标签：">
              <el-input v-model="msg" placeholder="请输入标签名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addtag">添加</el-button>
            </el-form-item>

            <div id="coursetagdiv">
              <ul>
                <li v-for="(v, i) in data.arr" :key="i">
                  {{ v }} <a @click="delarr(i)" href="javascript:;">x</a>
                </li>
              </ul>
            </div>
            <span id="tagspan">注：单个标签限6个字，最多三个标签</span>
          </div>

          <div id="listintroduce">
            <el-form-item label="课程介绍" :label-width="'100'">
              <el-input
                v-model="editTable.description"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>

          <div id="listsort">
            <el-form-item label="排序" :label-width="'100'">
              <el-input
                v-model="editTable.sort_by"
                autocomplete="off"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editalert = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div id="pagefoot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaulturl:'',
      coachid: "",
      coursenameid: "",
      coursenamearr: [],
      coacharr: [],
      coacharr: [],
      id: "",
      photourl: "",
      page: 1,
      size: 5,
      total: 0,
      radio: "1",
      msg: "",
      data: {
        name: "",
        coach: "",
        coursename: "",
        coursecoach: "",
        sort: "",
        time: "",
        person: 0,
        arr: [],
      },
      tableData: [],
      editalert: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      editTable: {
        name: "",
        url: "",
        cname: "",
        sort_by: "",
        courses_time: "",
        remarks: "",
        lessonTime: "",
        lessonMoney: "",
        description: "",
        sortBy: "",
        coach: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    open(v) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(v);
          this.$axios({
            url: "/gym/tutorCourses/delete",
            method: "post",
            dataType: "post",
            data: {
              id: v.row.id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            } else {
              this.$message.error("删除失败！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadimg(response, file, fileList) {
      console.log(response, file, fileList);
      this.photourl = response.data;
    },
    toaddpersonal() {
      this.$router.push("/addpersonal");
    },
    getCon() {
      this.$axios({
        url: "/gym/tutorCourses/list",
        method: "post",
        dataType: "json",
        data: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    getCoach() {
      this.$axios({
        url: "/gym/coach/all",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coacharr = res.data.data;
      });
    },
    change(v) {
      this.page = v;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    edit() {
      this.$axios({
        url: "/gym/tutorCourses/update",
        method: "post",
        dataType: "json",
        data: {
          id: this.id,
          name: this.editTable.name,
          image: this.photourl==''?(this.defaulturl):this.photourl,
          url: this.editTable.url,
          coursesTime: this.editTable.courses_time,
          upperLimit: this.editTable.upper_limit,
          coachId: this.editTable.coach,
          lessonTime: this.editTable.lesson_time,
          lessonMoney: this.editTable.lesson_money,
          remarks: this.editTable.remarks,
          description: this.editTable.description,
          tags: this.data.arr.toString(),
          sortBy: this.editTable.sort_by,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("编辑成功！");
          this.getCon();
          this.editalert = false;
        } else {
          this.$message.error("编辑失败！");
        }
      });
    },
    editbtn(data) {
      console.log(data);
      this.editalert = true;
      this.editTable = data;
      this.id = data.id;
      this.defaulturl=data.image;
    },
    addtag() {
      this.data.arr.push(this.msg);
      this.msg = "";
    },
    getcoursename() {
      this.$axios({
        url: "/gym/courses/nameList",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coursenamearr = res.data.data;
      });
    },
    getCoach() {
      this.$axios({
        url: "/gym/coach/all",
        method: "post",
        dataType: "json",
      }).then((res) => {
        console.log(res);
        this.coacharr = res.data.data;
      });
    },
    searchbtn() {
      this.$axios({
        url: "/gym/courses/list",
        method: "post",
        dataType: "json",
        data: {
          coursesId: this.data.coursenameid,
          coachsId: this.data.coachid,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.$message.success("查询成功！");
        } else {
          this.$message.error("查询失败！");
        }
        this.data.coursenameid = "";
        this.data.coachid = "";
      });
    },
    delarr(i){
      this.data.arr.splice(i,1);
    }
  },
  mounted() {
    this.getCon();
    this.getCoach();
    this.getcoursename();
    this.getCoach();
  },
};
</script>
<style scoped lang="less">
a{
  color: rgb(0, 204, 255);
  text-decoration: none;
}
#pagehead {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #000, #fff);
}
#pageheaddiv {
  width: 4px;
  height: 30px;
  background: #409eff;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
#pageheadspan {
  color: #fff;
  float: left;
  line-height: 40px;
  font-weight: bold;
  margin-left: 5px;
}
#pageheadbtn {
  float: right;
  margin-right: 50px;
  background: transparent;
  color: #000;
}
#headformdiv {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
#coursealertname {
  margin-top: 10px;
}
#coursephoto {
  float: left;
  margin-left: 50px;
}
#coursealertupload {
  text-align: left;
  margin-left: 120px;
}
#pagefoot {
  text-align: right;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
#personaltable {
  width: 98%;
  margin-left: 10px;
}
#editbox {
  text-align: left;
}
#videoaddress {
  margin-top: 30px;
}
#coachdiv {
  margin-left: 40px;
}
#listfee1 {
  margin-left: 27px;
}
#listfee2 {
  margin-left: 95px;
}
#listfee3 {
  margin-left: 95px;
}
#listremarks {
  margin-left: 27px;
}
#listtag {
  margin-left: 12px;
}
#coursetagdiv {
  float: right;
  margin-right: 140px;
  width: 400px;
  height: 40px;
  overflow: hidden;
  ul {
    li {
      list-style: none;
      display: block;
      width: 100px;
      height: 30px;
      float: left;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid rgb(0, 204, 255);
      border-radius: 5px;
      margin-top: 5px;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
#tagspan {
  display: block;
  font-size: 14px;
  color: #888;
  margin-left: 85px;
}
#listintroduce {
  margin-top: 20px;
  margin-left: 28px;
}
#listsort {
  margin-left: 55px;
}
#coursephoto {
  margin-left: 20px;
}
#coursealertname {
  margin-left: 20px;
}
</style>